<template>
	<view class="pageBox">
		<!--代理专区-->
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index"
			@click="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })"
			>
				<image :src="item.image" class="item-image"></image>
				<view class="item-title text-cut">{{item.title || ''}}</view>
				<view class="item-desc text-cut-3">{{item.subtitle || ''}}</view>
				
				<view class="bottom-box">
					<view class="flex align-center">
						<view class="price-prefix">￥</view>
						<view class="price">{{item.price || 0}}</view>
					</view>
					<view class="buy-btn">购买</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			isEmpty: false,
			dataList:[],
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1
		}
	},
	onLoad() {
		this.getList();
	},
	onShow(){
		
	},
	// 触底加载更多
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getList();
		}
	},
	methods: {
		getList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('goods.lists', {
				page: that.currentPage,
				category_id: 4,
			}).then(res => {
				if (res.code === 1) {
					that.dataList = [...that.dataList, ...res.data.data];
		
					that.isEmpty = !that.dataList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' :
						'nomore';
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.list{
	padding: 20rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	
	.list-item{
		width: 334rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		margin-bottom: 18rpx;
		padding-bottom: 20rpx;
	}
	
	.item-image{
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		width: 334rpx;
		height: 334rpx;
	}
	
	.item-title{
		width: 286rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 35rpx;
		margin-top: 30rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	
	.item-desc{
		margin-top: 16rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		width: 286rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #707070;
		line-height: 28rpx;
	}
	
	.bottom-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	
	.price-prefix{
		font-size: 24rpx;
		font-family: Roboto-Regular, Roboto;
		font-weight: 400;
		color: #D9444B;
		line-height: 28rpx;
	}
	
	.price{
		font-size: 38rpx;
		font-family: Roboto-Regular, Roboto;
		font-weight: 400;
		color: #D9444B;
		line-height: 28rpx;
	}
	
	.buy-btn{
		width: 120rpx;
		height: 48rpx;
		background: #9C3728;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		opacity: 1;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>